<template>
  <div class="resources">
    <!--顶部图片-->
    <div class="resource_header_image" style="width: 100%; height: 30%">
      <img src="../../images/resource.jpg" style="width: 100%; height: 350px" />
      <div class="resource_header_cover">
        <div align="center">
          <div style="position: relative; bottom: -600px">
            <div class="resource_header_title" style="font-family: 'STXingkai'">
              资源库
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--中间内容-->
    <div class="resource-container">
      <div class="resource-list">
        <div
          class="resource-item"
          v-for="item in resourceList"
          :key="item.sortTitle"
        >
          <a href="#studyresource" class="resource-name">{{
            item.sortTitle
          }}</a>
          <div class="resource-num">{{ item.resources.length }}</div>
          <div class="resource-rhombus"></div>
        </div>
        <el-button
          style="margin-left: 10px; height: 38px; margin-top: 10px"
          type="danger"
          plain
          @click="centerDialogVisible = true"
          >添加资源</el-button
        >
      </div>
    </div>
    <div class="resource">
      <div class="resource-tip">
        <div
          class="tip-first"
          v-for="item in resourceList"
          :key="item.sortTitle"
        >
          <div class="first-top">
            <div class="tip-name">
              <i style="width: 30px; height: 30px" :class="item.sourceIcon"></i>
              <h2>{{ item.sortTitle }}</h2>
            </div>
          </div>
          <div class="tip-content">
            <ul>
              <li v-for="item in item.resources" :key="item.resourceId">
                <a :href="item.resourceUrl">
                  <div class="comment-top">
                    <div class="tip-img"><img :src="item.resourcePhoto" /></div>
                    <div class="img-right">
                      <span style="color: #4961b9; font-size: 16px">{{
                        item.sourceName
                      }}</span>
                      <span
                        style="
                          display: block;
                          margin-top: -15px;
                          font-size: 12px;
                          color: #777879;
                        "
                        >视屏类</span
                      >
                    </div>
                  </div>
                  <div class="img-bottom">
                    <p>{{ item.resourceDes }}</p>
                  </div>
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <el-dialog
      title="添加资源"
      :visible.sync="centerDialogVisible"
      width="30%"
      center
    >
      <el-form
        :inline="true"
        :model="resourceInfo"
        class="demo-form-inline"
        :rules="rules"
        ref="resourceInfo"
      >
        <el-form-item label="资源名称" prop="sourceName">
          <el-input
            v-model="resourceInfo.sourceName"
            placeholder="资源名称（如：CSDN）"
          ></el-input>
        </el-form-item>
        <el-form-item label="资源地址" prop="resourceUrl">
          <el-input
            v-model="resourceInfo.resourceUrl"
            placeholder="资源描述（如：https：//www.csdn.net）"
          ></el-input>
        </el-form-item>
        <el-form-item label="资源描述" prop="resourceDes">
          <el-input
            v-model="resourceInfo.resourceDes"
            placeholder="B站描述（如：B站是一个学习网站（15字以内））"
          ></el-input>
        </el-form-item>
        <el-form-item label="你的姓名" prop="sourceNickname">
          <el-input
            v-model="resourceInfo.sourceNickname"
            placeholder="YaLing"
          ></el-input>
        </el-form-item>
        <el-form-item label="一级分类" prop="firstSort">
          <el-select
            v-model="resourceInfo.firstSort"
            placeholder="一级分类（如：学习资源）"
            style="width: 100%"
          >
            <el-option
              v-for="(item, index) in resourceList"
              :key="index"
              :label="item.sortTitle"
              :value="item.sortTitle"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="二级分类" prop="secondSort">
          <el-input
            v-model="resourceInfo.secondSort"
            placeholder="二级分类（如；文章类）"
          ></el-input>
        </el-form-item>
        <el-form-item label="是否公开" style="margin-left: 3%">
          <el-switch
            v-model="resourceInfo.isPublish"
            active-color="#13ce66"
            inactive-color="#ff4949"
          >
          </el-switch>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addResourceBtn()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import "@/assets/css/resource.css";
import { getResourceList, addResource } from "@/api/resource";
import { formatDate } from "@/utils/date";

const resourceInfo = {
  resourceId: null,
  resourceUrl: "",
  resourceDes: "",
  resourceStatus: 0,
  firstSort: "",
  secondSort: "",
  resourcePhoto: "",
  isPublish: true,
  sourceUserId: "",
  sourceNickname: "",
  sourceIcon: "",
  sourceName: "",
  createTime: "",
  updateTime: "",
};

export default {
  name: "resource",
  data() {
    var checkUrl = (rule, value, callback) => {
      var reg =
        /(http|ftp|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&amp;:/~\+#]*[\w\-\@?^=%&amp;/~\+#])?/;
      if (!value) {
        //如果输入为空直接返回
        callback();
      } else {
        //如果字符串 string 中含有与 RegExpObject 匹配的文本，则返回 true，否则返回 false。
        if (reg.test(value)) {
          //匹配成功返回
          callback();
        } else {
          //匹配不成功返回错误显示
          callback(new Error("网址格式有问题！"));
        }
      }
    };
    return {
      resourceList: [],
      activeIndex: 1,
      centerDialogVisible: false,
      resourceInfo: Object.assign({}, resourceInfo),
      rules: {
        sourceName: [
          { required: true, message: "请输入资源名称", trigger: "blur" },
          {
            min: 1,
            max: 15,
            message: "长度在 1 到 15 个字符",
            trigger: "blur",
          },
        ],
        resourceUrl: [{ required: true, validator: checkUrl, trigger: "blur" }],
        resourceDes: [
          { required: true, message: "请输入资源描述", trigger: "blur" },
          {
            min: 1,
            max: 30,
            message: "长度在 1 到 30 个字符",
            trigger: "blur",
          },
        ],
        sourceNickname: [
          { required: true, message: "请输入你的姓名", trigger: "blur" },
          {
            min: 2,
            max: 10,
            message: "长度在 2 到 10 个字符",
            trigger: "blur",
          },
        ],
        firstSort: [
          { required: true, message: "请选择一级分类", trigger: "blur" },
        ],
        secondSort: [
          { required: true, message: "请输入二级分类", trigger: "blur" },
          { min: 2, max: 5, message: "长度在 2 到 5 个字符", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    this.getResourceListFun();
  },
  // 创建一个过滤器
  filters: {
    formatDate(time) {
      if (time == null || time === "") {
        return "N/A";
      }
      let date = new Date(time);
      return formatDate(date, "yyyy-MM-dd");
    },
  },
  methods: {
    getResourceListFun() {
      getResourceList().then((response) => {
        this.resourceList = response.data;
      });
    },
    addResourceBtn() {
      this.$refs.resourceInfo.validate((valid) => {
        if (valid) {
          addResource(this.resourceInfo).then((response) => {
            if (response.code == 200) {
              this.$message({
                message: "添加成功，谢谢你的分享！",
                type: "success",
              });
            } else {
              this.$message({
                message: "添加失败！",
                type: "warning",
              });
            }
          });
          this.getResourceListFun();
          this.centerDialogVisible = false;
        }
      });
    },
  },
};
</script>

<style></style>
